<template>
  <transition @after-enter="afterEnter"
              @after-leave="afterLeave"
              name="el-fade-in-linear">
    <section :style="style" v-show="visible" class="infoBox">
      <section :style="style2">
        <slot>

        </slot>
      </section>
      <el-button v-show="showClose" @click="handleClose" type="text"
                 style="margin: 0;padding: 0;position: absolute;top: 20px;right: 20px;">
        <i class="el-icon-close" style="font-size: 18px; color: #909399;"></i>
      </el-button>
    </section>
  </transition>
</template>

<script>
  export default {
    name: 'infoBox',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      zIndex: {
        type: Number,
        default: 2000
      },
      top: {
        type: Number,
        default: 0
      },
      right: {
        type: Number,
        default: 0
      },
      width: {
        type: Number,
        default: 400
      },
      height: {
        type: Number,
        default: 0
      },
      showClose: {
        type: Boolean,
        default: true
      },
      map:{

      }
    },
    mounted() {
      this.getStyle()
    },
    data() {
      return {
        style: null,
        style2: null
      }
    },
    methods: {
      afterEnter() {
        this.$emit('opened')
      },
      afterLeave() {
        this.$emit('closed')
      },
      handleClose() {
        console.log('handleClose====>')
        this.$emit('close')
      },
      getStyle() {
        const style = {
          position: 'absolute',
          zIndex: this.zIndex,
          width: this.width + 'px',
          top: this.top + 72 + 'px',
          right: this.right + 'px'
        }

        this.style = style

        this.style2 = {}
        if (this.height > 0) {
          this.style2.height = this.height + 'px'
        }
        return style
      }
    }
  }
</script>

<style scoped lang="scss">
  .infoBox {
    .basic-container div {
      height: 100%;
    }

    ::v-deep .el-card__body {
      padding: 10px;
    }

    ::v-deep .basic-container .el-card {
      box-shadow: 1px 3px 10px 0px #909399;
    }
  }
</style>
